/**
 * 个人资料编辑页面特定JavaScript功能
 */

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化头像上传
    initAvatarUpload();
    
    // 初始化保存按钮
    initSaveButton();
});

/**
 * 初始化头像上传功能
 */
function initAvatarUpload() {
    // 头像上传点击事件
    document.getElementById('avatarUpload').addEventListener('click', function(e) {
        // 阻止默认行为，显示自定义的模态框
        e.preventDefault();
        document.getElementById('avatarModal').classList.remove('hidden');
    });
    
    // 系统头像选择
    document.querySelectorAll('.avatar-option').forEach(option => {
        option.addEventListener('click', function() {
            // 移除其他选项的选中状态
            document.querySelectorAll('.avatar-option').forEach(opt => {
                opt.classList.remove('border-blue-600');
                opt.classList.add('border-transparent');
            });
            
            // 添加当前选项的选中状态
            this.classList.remove('border-transparent');
            this.classList.add('border-blue-600');
            
            // 获取选中的头像图片
            const selectedAvatar = this.querySelector('img').src;
            
            // 更新全局变量以便保存
            window.selectedAvatarUrl = selectedAvatar;
        });
    });
    
    // 确认按钮点击事件
    document.querySelector('#avatarModal button.bg-blue-600').addEventListener('click', function() {
        if (window.selectedAvatarUrl) {
            document.querySelector('.w-24.h-24 img').src = window.selectedAvatarUrl;
        }
        document.getElementById('avatarModal').classList.add('hidden');
    });
    
    // 模态框关闭按钮
    document.querySelector('#avatarModal button.p-2').addEventListener('click', function() {
        document.getElementById('avatarModal').classList.add('hidden');
    });
}

/**
 * 初始化保存按钮
 */
function initSaveButton() {
    // 保存按钮点击
    document.getElementById('saveBtn').addEventListener('click', function() {
        // 收集表单数据
        const userData = {
            nickname: document.querySelector('input[type="text"]').value,
            gender: document.querySelector('select').value,
            birthday: document.querySelector('input[type="date"]').value,
            avatar: document.querySelector('.w-24.h-24 img').src
        };
        
        // 在实际应用中，这里应该发送到服务器
        console.log('保存用户数据：', userData);
        
        // 模拟保存成功
        showToast('保存成功！', 'success');
        
        // 延迟返回上一页
        setTimeout(() => {
            window.location.href = 'my.html';
        }, 1000);
    });
}

/**
 * 显示消息提示
 * @param {string} message - 要显示的消息内容
 * @param {string} type - 消息类型：'success', 'error', 'info'
 * @param {number} duration - 显示持续时间（毫秒）
 */
function showToast(message, type = 'info', duration = 2000) {
    // 创建toast元素
    const toast = document.createElement('div');
    
    // 设置样式
    toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 px-4 py-2 rounded-full z-50 text-white text-sm';
    
    // 根据类型设置背景色
    if (type === 'success') {
        toast.classList.add('bg-green-500');
    } else if (type === 'error') {
        toast.classList.add('bg-red-500');
    } else {
        toast.classList.add('bg-blue-500');
    }
    
    // 设置消息内容
    toast.textContent = message;
    
    // 添加到页面
    document.body.appendChild(toast);
    
    // 定时移除
    setTimeout(() => {
        toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
        setTimeout(() => {
            document.body.removeChild(toast);
        }, 300);
    }, duration);
} 